<template>
  <div>

    <myheader></myheader>

			<br><br>

            <!-- 面包屑导航 -->
            <Breadcrumb :datas='datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">



            <table>

                <tr>
                    <td style="padding:5px">
                        商品名称：
                    </td>
                    <td style="padding:5px">
                        <input type="text" v-model='name'>
                    </td>

                </tr>

                <tr>
                    <td style="padding:5px">
                        商品标签：
                    </td>
                    <td style="padding:5px">

                      <TagInput v-model="mytags" type="string" split="," placeholder="请输入标签,输入完毕后直接按回车"></TagInput>

                    </td>

                </tr>



                <tr>
                    <td style="padding:5px">
                        商品简介：
                    </td>
                    <td style="padding:5px">
                        <input type="text" v-model='desc'>
                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">
                      颜色：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="color"/>

                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">
                      号码：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="size"/>

                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                      季节：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="season"/>

                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                      价格：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="price"/>

                    </td>
                </tr>



                <tr>
                    <td style="padding:5px">

                    </td>
                    <td style="padding:5px">
                        <Button @click="submit" color="green">提交</Button>




                    </td>

                </tr>

            </table>


		</div>
	</section>



    <mybody>

    </mybody>

  </div>

</template>



<script>

//导包
import myheader from './myheader.vue';
import mybody from './mybody.vue';




export default {
  data () {
    return {

      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'添加商品'}],
      name:'',
      desc:'',
      color:'',
      size:'',
      season:'',
      price:0,
      cate_id:1,
      //商品标签变量
      mytags:''



    }
  },
  //注册组件标签
  components:{
      'myheader':myheader,

      'mybody':mybody,
  },

  mounted:function(){





},
  methods:{



    //提交
    submit(){




      //拼接商品规格
      var parms = {};
      parms['color'] = this.color;
      parms['size'] = this.size;
      parms['season'] = this.season;


      //格式化字符串
      parms = JSON.stringify(parms);
      console.log(parms);


      // //从字符串转回json
      // parms = JSON.parse(parms);
      // console.log(parms)




             //发送请求
        this.axios.get('http://localhost:8000/insertgoods/',{params:{name:this.name,desc:this.desc,parms:parms,price:this.price,cate_id:this.cate_id}}).then((result) =>{

                console.log(result);

                this.$Message(result.data.message);



                //只有商品入库成功，才能添加标签

              this.axios.get('http://localhost:8000/inserttags/',{params:{id:result.data.id,tags:this.mytags}}).then((result) =>{



                     console.log(result)


                 });





        });




    },






    }
}


</script>

<style>



</style>
